<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>My New Post | CHENWEI 的技术小镇 | 纸上得来终觉浅，绝知此事要躬行</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="">
    <meta name="description" content="HTML基础一、HTML5和HTML4的区别1、HTML5推出的原因：    HTML存在问题 HTML5解决方案    1 Web浏览器间的兼容性低 使各浏览器的功能符合通用标准   2 文档结构不够明确 增加与结构相关的元素   3 Web应用程序的功能受到限制 提供供Web应用程序使用的API   2、HTML5语法的改变： 内容类型不变：HTML5的文件扩展符（html或.htm）与内容类">
<meta property="og:type" content="article">
<meta property="og:title" content="My New Post">
<meta property="og:url" content="https://chen123138.github.io/2020/04/25/My-New-Post/index.html">
<meta property="og:site_name" content="CHENWEI 的技术小镇">
<meta property="og:description" content="HTML基础一、HTML5和HTML4的区别1、HTML5推出的原因：    HTML存在问题 HTML5解决方案    1 Web浏览器间的兼容性低 使各浏览器的功能符合通用标准   2 文档结构不够明确 增加与结构相关的元素   3 Web应用程序的功能受到限制 提供供Web应用程序使用的API   2、HTML5语法的改变： 内容类型不变：HTML5的文件扩展符（html或.htm）与内容类">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-04-25T15:38:49.000Z">
<meta property="article:modified_time" content="2020-10-20T16:36:05.316Z">
<meta property="article:author" content="CHEN WEI">
<meta property="article:tag" content="前端">
<meta property="article:tag" content=" html">
<meta property="article:tag" content=" css">
<meta property="article:tag" content=" JavaScript">
<meta property="article:tag" content=" vue.js">
<meta name="twitter:card" content="summary">
    
        <link rel="alternate" type="application/atom+xml" title="CHENWEI 的技术小镇" href="/atom.xml">
    
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/css/style.css?v=1.7.2">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">CHEN WEI</h5>
          <a href="mailto:chenwdzyyx@163.com" title="chenwdzyyx@163.com" class="mail">chenwdzyyx@163.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/categories"  >
                <i class="icon icon-lg icon-book"></i>
                技术文档
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-cloud-download"></i>
                资源分享
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-heart"></i>
                点点滴滴
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/post"  >
                <i class="icon icon-lg icon-unlink"></i>
                给我留言
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/me"  >
                <i class="icon icon-lg icon-won"></i>
                关于CHEN WEI
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/chen123138" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://weibo.com/u/5380108603?is_all=1" target="_blank" >
                <i class="icon icon-lg icon-qq"></i>
                QQ
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://me.csdn.net/qq_43672268" target="_blank" >
                <i class="icon icon-lg icon-envira"></i>
                csdn
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">My New Post</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="Search">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">My New Post</h1>
        <h5 class="subtitle">
            
                <time datetime="2020-04-25T15:38:49.000Z" itemprop="datePublished" class="page-time">
  2020-04-25
</time>


	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></li></ul>

            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap post-toc-shrink" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#HTML基础"><span class="post-toc-number">1.</span> <span class="post-toc-text">HTML基础</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#一、HTML5和HTML4的区别"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">一、HTML5和HTML4的区别</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1、HTML5推出的原因："><span class="post-toc-number">1.1.1.</span> <span class="post-toc-text">1、HTML5推出的原因：</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2、HTML5语法的改变："><span class="post-toc-number">1.1.2.</span> <span class="post-toc-text">2、HTML5语法的改变：</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3、-新增的元素和废除的元素："><span class="post-toc-number">1.1.3.</span> <span class="post-toc-text">3、 新增的元素和废除的元素：</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#4、-新增的属性和废除的属性"><span class="post-toc-number">1.1.4.</span> <span class="post-toc-text">4、 新增的属性和废除的属性</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#5、全局属性"><span class="post-toc-number">1.1.5.</span> <span class="post-toc-text">5、全局属性</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#二、meta标签"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">二、meta标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1、meta标签的实例"><span class="post-toc-number">1.2.1.</span> <span class="post-toc-text">1、meta标签的实例</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2、meta标签的组成"><span class="post-toc-number">1.2.2.</span> <span class="post-toc-text">2、meta标签的组成</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#三、src和href的区别"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">三、src和href的区别</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1、主要运用："><span class="post-toc-number">1.3.1.</span> <span class="post-toc-text">1、主要运用：</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2、使用区别："><span class="post-toc-number">1.3.2.</span> <span class="post-toc-text">2、使用区别：</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#href-Hypertext-Reference-超文本引用："><span class="post-toc-number">1.3.2.1.</span> <span class="post-toc-text">href (Hypertext Reference) 超文本引用：</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#src-Source-源："><span class="post-toc-number">1.3.2.2.</span> <span class="post-toc-text">src (Source)源：</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#四、script标签中的async和defer"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">四、script标签中的async和defer</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1、问题："><span class="post-toc-number">1.4.1.</span> <span class="post-toc-text">1、问题：</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2、解决方案之defer："><span class="post-toc-number">1.4.2.</span> <span class="post-toc-text">2、解决方案之defer：</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3、解决方案之async："><span class="post-toc-number">1.4.3.</span> <span class="post-toc-text">3、解决方案之async：</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#五、块级元素和行内元素"><span class="post-toc-number">1.5.</span> <span class="post-toc-text">五、块级元素和行内元素</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1、块级元素："><span class="post-toc-number">1.5.1.</span> <span class="post-toc-text">1、块级元素：</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2、行内元素"><span class="post-toc-number">1.5.2.</span> <span class="post-toc-text">2、行内元素</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3、行内块级元素"><span class="post-toc-number">1.5.3.</span> <span class="post-toc-text">3、行内块级元素</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#4、显示模式的转换"><span class="post-toc-number">1.5.4.</span> <span class="post-toc-text">4、显示模式的转换</span></a></li></ol></li></ol></li></ol>
        </nav>
    </aside>


<article id="post-My-New-Post"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">My New Post</h1>
        <div class="post-meta">
            <time class="post-time" title="2020-04-25 23:38:49" datetime="2020-04-25T15:38:49.000Z"  itemprop="datePublished">2020-04-25</time>

            
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></li></ul>



            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h2 id="HTML基础"><a href="#HTML基础" class="headerlink" title="HTML基础"></a>HTML基础</h2><h3 id="一、HTML5和HTML4的区别"><a href="#一、HTML5和HTML4的区别" class="headerlink" title="一、HTML5和HTML4的区别"></a>一、HTML5和HTML4的区别</h3><h4 id="1、HTML5推出的原因："><a href="#1、HTML5推出的原因：" class="headerlink" title="1、HTML5推出的原因："></a>1、HTML5推出的原因：</h4><table>
<thead>
<tr>
<th align="center"></th>
<th align="center">HTML存在问题</th>
<th align="center">HTML5解决方案</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">Web浏览器间的兼容性低</td>
<td align="center">使各浏览器的功能符合通用标准</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">文档结构不够明确</td>
<td align="center">增加与结构相关的元素</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">Web应用程序的功能受到限制</td>
<td align="center">提供供Web应用程序使用的API</td>
</tr>
</tbody></table>
<h4 id="2、HTML5语法的改变："><a href="#2、HTML5语法的改变：" class="headerlink" title="2、HTML5语法的改变："></a>2、HTML5语法的改变：</h4><ul>
<li><p>内容类型不变：HTML5的文件扩展符（html或.htm）与内容类型（text/html）保持不变</p>
</li>
<li><p>DOCTYPE声明变化：HTML4中需要指明是HTML的哪个版本，HTML5不需要，只使用<!DOCTYPE html>即可</p>
</li>
<li><p>指定字符编码变化：</p>
<p>HTML4：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">‶content-type″</span> <span class="attr">content</span>=<span class="string">‶text/html;</span> <span class="attr">charset</span>=<span class="string">UTF-8″</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>HTML5:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">‶UTF-8″</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>可以省略元素的标记：HTML5中很多元素标记可以省略</p>
</li>
<li><p>具有boolean值的属性调整：不指定属性值、属性名设定为属性值、字符串设为空时表示属性值为true；不写该属性表示属性值为false。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">‶checkbox″</span> <span class="attr">checked</span>=<span class="string">‶checked″</span>&gt;</span>          表示checked值为true</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">‶checkbox″</span> <span class="attr">checked</span>=<span class="string">‶″</span>&gt;</span>                      表示checked值为true</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">‶checkbox″</span>&gt;</span>                                       表示checked值为false</span><br></pre></td></tr></table></figure>
</li>
<li><p>可省略引号：HTML5可省略指定属性值时的引号。</p>
</li>
</ul>
<h4 id="3、-新增的元素和废除的元素："><a href="#3、-新增的元素和废除的元素：" class="headerlink" title="3、 新增的元素和废除的元素："></a>3、 新增的元素和废除的元素：</h4><p>新增结构元素</p>
<table>
<thead>
<tr>
<th align="center"></th>
<th align="center">元素</th>
<th align="center">解释</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">section</td>
<td align="center">表示页面中内容块，如章节，页眉页脚等，可以和h1到h6结合表示文档结构</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">article</td>
<td align="center">表示页面中一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">aside</td>
<td align="center">表示article内容之外，与article内容相关的辅助信息</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">header</td>
<td align="center">表示页面中的区域块，通常用它表示标题</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">hgroup</td>
<td align="center">用于对整个页面或页面中标题进行整合</td>
</tr>
<tr>
<td align="center">6</td>
<td align="center">footer</td>
<td align="center">通常表示区域快的脚部或底部，用于承载作者姓名、创作日期等与作者的元素</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">nav</td>
<td align="center">表示页面中导航部分</td>
</tr>
<tr>
<td align="center">8</td>
<td align="center">figure</td>
<td align="center">表示一段独立的流内容，一般表示主体流内容的一个独立单元</td>
</tr>
</tbody></table>
<p>新增其他元素</p>
<table>
<thead>
<tr>
<th align="center"></th>
<th align="center">元素</th>
<th align="center">解释</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">video</td>
<td align="center">定义电影片段、视频流等视频</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">audio</td>
<td align="center">定义音乐或音频流</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">canvas</td>
<td align="center">画布，本身没有行为，仅提供一块画布，但它的API展现给JavaScript及脚本，能够把想绘制的东西绘制在canvas上</td>
</tr>
</tbody></table>
<p>新增的input元素的类型</p>
<table>
<thead>
<tr>
<th align="center"></th>
<th align="center">元素类型</th>
<th align="center">意义</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">email</td>
<td align="center">表示必须输的email地址</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">url</td>
<td align="center">表示文本框输入的一个地址</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">number</td>
<td align="center">表示数字</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">range</td>
<td align="center">表示数字范围值</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">DataPickers</td>
<td align="center">表示日历的日期、时间</td>
</tr>
</tbody></table>
<p>废除的元素：能用css属性写出的元素（basefont，big，center，font等），不再使用frame框架，只有部分浏览器支持的元素</p>
<h4 id="4、-新增的属性和废除的属性"><a href="#4、-新增的属性和废除的属性" class="headerlink" title="4、 新增的属性和废除的属性"></a>4、 新增的属性和废除的属性</h4><p>新增属性</p>
<table>
<thead>
<tr>
<th align="center"></th>
<th align="center">属性</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">autofocus</td>
<td align="center">页面加载后自动获得焦点</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">placeholder</td>
<td align="center">提示</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">form</td>
<td align="center">声明元素属于哪个表单（值指向目标表单的id）</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">required</td>
<td align="center">提示用户输入域不能为空</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">autocomplete</td>
<td align="center">输入时的提示（邮箱补全提示等）</td>
</tr>
<tr>
<td align="center">6</td>
<td align="center">img按钮的height和width</td>
<td align="center">设置button的高宽</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">list</td>
<td align="center">与datalist标签配合使用（list为输入框法的属性，datalist标签设置提示，内涵option标签）</td>
</tr>
<tr>
<td align="center">8</td>
<td align="center">max，min，step</td>
<td align="center">为输入包含日期的输入框作约束</td>
</tr>
<tr>
<td align="center">9</td>
<td align="center">pattern</td>
<td align="center">用于验证输入字段的模式，其实就是正则表达式</td>
</tr>
<tr>
<td align="center">10</td>
<td align="center">multiple</td>
<td align="center">规定输入域中可选择多个值（适用于input[email,file]）</td>
</tr>
<tr>
<td align="center">11</td>
<td align="center">control</td>
<td align="center">在lable中使用，可访问lable中表单元素的值</td>
</tr>
<tr>
<td align="center">12</td>
<td align="center">link的sizes</td>
<td align="center">sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel=”icon”)，才能使用该属性</td>
</tr>
<tr>
<td align="center">13</td>
<td align="center">ol的reversed</td>
<td align="center">reversed是个bool属性，规定有序列表倒序</td>
</tr>
<tr>
<td align="center">14</td>
<td align="center">style的scoped</td>
<td align="center">提供作用域，使用时在当前元素和子元素生效</td>
</tr>
<tr>
<td align="center">15</td>
<td align="center">mainfest</td>
<td align="center">下次断网时也可看见</td>
</tr>
</tbody></table>
<h4 id="5、全局属性"><a href="#5、全局属性" class="headerlink" title="5、全局属性"></a>5、全局属性</h4><p>HTML5中新增全局属性的概念，全局属性指可以对任何元素都使用的属性</p>
<table>
<thead>
<tr>
<th align="center"></th>
<th align="center">全局属性</th>
<th align="center">应用</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">contentEditable</td>
<td align="center">允许用户编辑元素中内容，使用该属性的元素必须为可以获得鼠标焦点的元素，而且在点击鼠标后向用户提供一个插入符号，提示用户该元素允许进行编辑</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">designMode</td>
<td align="center">用来指定整个页面是否可编辑，当页面可编辑时，页面中所有支持contentEditable属性的元素都变为可编辑状况。designMode属性只能在JavaScript脚本中被修改、编辑。属性值可取on（可编辑）或off（不可编辑）</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">hidden</td>
<td align="center">使元素不可见，但是浏览器渲染元素，在javascript中设置属性值</td>
</tr>
</tbody></table>
<h3 id="二、meta标签"><a href="#二、meta标签" class="headerlink" title="二、meta标签"></a>二、meta标签</h3><h4 id="1、meta标签的实例"><a href="#1、meta标签的实例" class="headerlink" title="1、meta标签的实例"></a>1、meta标签的实例</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="2、meta标签的组成"><a href="#2、meta标签的组成" class="headerlink" title="2、meta标签的组成"></a>2、meta标签的组成</h4><p><code>meta</code>标签共有两个属性：http-equiv属性和name属性</p>
<ul>
<li>http-equiv属性：相当于http的文件头作用，向浏览器传回一些有用的信息，使浏览器正确和精确地显示网页内容，与之对应的属性值为content（参数）</li>
</ul>
<p>语法格式：＜meta http-equiv=”参数” content=”参数变量值”＞</p>
<p>实例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">1.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">”Set-Cookie”</span> <span class="attr">content</span>=<span class="string">”cookievalue</span>=<span class="string">xxx;</span> <span class="attr">expires</span>=<span class="string">Friday,12-Jan-2001</span> <span class="attr">18:18:18</span> <span class="attr">GMT</span>; <span class="attr">path</span>=<span class="string">/”</span>&gt;</span>:如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。</span><br><span class="line">2.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">'expires'</span> <span class="attr">content</span>=<span class="string">'时间'</span> &gt;</span>：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。</span><br><span class="line">3.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">”Refresh”</span> <span class="attr">content</span>=<span class="string">”5;URL”</span>&gt;</span>：告诉浏览器在【数字】秒后跳转到【一个网址】</span><br><span class="line">4.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">”content-Type”</span> <span class="attr">content</span>=<span class="string">”text/html;</span> <span class="attr">charset</span>=<span class="string">utf-8″</span>&gt;</span>：设定页面使用的字符集。</span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">”utf-8″</span>&gt;</span>：在HTML5中设定字符集的简写写法。</span><br><span class="line">5.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">”Pragma”</span> <span class="attr">content</span>=<span class="string">”no-cache”</span>&gt;</span>：禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。</span><br><span class="line">6.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">”Window-target”</span> <span class="attr">content</span>=<span class="string">”_top”</span>&gt;</span>：用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。</span><br><span class="line">7.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">'X-UA-Compatible'</span> <span class="attr">content</span>=<span class="string">'IE=edge,chrome=1'</span>&gt;</span> :强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染，如果是双核浏览器就用chrome内核。</span><br></pre></td></tr></table></figure>

<ul>
<li>name属性：用于描述网页，与之对应的属性值为content（便于搜索引擎机器人查找信息和分类信息）</li>
</ul>
<p>语法格式：＜meta name=”参数” content=”具体的参数值”＞</p>
<p>实例：（对SEO比较重要的是ketwords和description）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”viewport”</span> <span class="attr">content</span>=<span class="string">”width</span>=<span class="string">device-width,</span> <span class="attr">initial-scale</span>=<span class="string">1,</span> <span class="attr">maximum-scale</span>=<span class="string">1,</span> <span class="attr">user-scalable</span>=<span class="string">no”</span>&gt;</span>：在移动设备浏览器上，禁用缩放（zooming）功能，用户只能滚动屏幕。</span><br><span class="line">2.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”description”</span> <span class="attr">content</span>=<span class="string">””</span>&gt;</span>：告诉搜索引擎，当前页面的主要内容是xxx。</span><br><span class="line">3.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”keywords”</span> <span class="attr">content</span>=<span class="string">””</span>&gt;</span>：告诉搜索引擎，当前页面的关键字。</span><br><span class="line">4.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”author”</span> <span class="attr">content</span>=<span class="string">””</span>&gt;</span>：告诉搜索引擎，标注网站作者是谁。</span><br><span class="line">5.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”copyright”</span> <span class="attr">content</span>=<span class="string">””</span>&gt;</span>：标注网站的版权信息。</span><br></pre></td></tr></table></figure>

<h3 id="三、src和href的区别"><a href="#三、src和href的区别" class="headerlink" title="三、src和href的区别"></a>三、src和href的区别</h3><h4 id="1、主要运用："><a href="#1、主要运用：" class="headerlink" title="1、主要运用："></a>1、主要运用：</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">引用css文件时：`href="cssfile.css"`</span><br><span class="line">引用js文件时：`src="myscript.js"`</span><br><span class="line">引用图片：`src="mypic.jpg"`</span><br><span class="line">网站链接：`href="http://www.webpage.com"</span><br></pre></td></tr></table></figure>

<h4 id="2、使用区别："><a href="#2、使用区别：" class="headerlink" title="2、使用区别："></a>2、使用区别：</h4><p>src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系 </p>
<h5 id="href-Hypertext-Reference-超文本引用："><a href="#href-Hypertext-Reference-超文本引用：" class="headerlink" title="href (Hypertext Reference) 超文本引用："></a>href (Hypertext Reference) 超文本引用：</h5><p>指定web资源的位置，从而定义当前的锚点，当使用link引入时，css文件的加载是同时进行的，而使用@import引入的样式实在页面载入之后在加载的，推荐使用link而不是@import</p>
<h5 id="src-Source-源："><a href="#src-Source-源：" class="headerlink" title="src (Source)源："></a>src (Source)源：</h5><p>这个属性是将资源嵌入到当前文档中元素所在的位置，原理是当执行这段代码时，会暂停页面的渲染知道加载完这个js文件或者img，所以推荐在文档最后引入文件</p>
<h3 id="四、script标签中的async和defer"><a href="#四、script标签中的async和defer" class="headerlink" title="四、script标签中的async和defer"></a>四、script标签中的async和defer</h3><h4 id="1、问题："><a href="#1、问题：" class="headerlink" title="1、问题："></a>1、问题：</h4><p>当在HTML文件中使用script时，会按照顺序来执行脚本，在加载和执行过程过程中，会产生组赛后续的DOM渲染</p>
<h4 id="2、解决方案之defer："><a href="#2、解决方案之defer：" class="headerlink" title="2、解决方案之defer："></a>2、解决方案之defer：</h4><p>执行是异步的，当执行HTML文件时，遇到script引入，开始下载，同时执行后面的操作，<strong>在整个页面渲染完成后就执行</strong>，多个defer按照顺序进行</p>
<h4 id="3、解决方案之async："><a href="#3、解决方案之async：" class="headerlink" title="3、解决方案之async："></a>3、解决方案之async：</h4><p>执行是异步的，当执行HTML文件时，遇到script引入，开始下载，同时执行后面的操作，<strong>在下载完文件之后就进行加载</strong>，多个async不一定按照顺序执行</p>
<h3 id="五、块级元素和行内元素"><a href="#五、块级元素和行内元素" class="headerlink" title="五、块级元素和行内元素"></a>五、块级元素和行内元素</h3><h4 id="1、块级元素："><a href="#1、块级元素：" class="headerlink" title="1、块级元素："></a>1、块级元素：</h4><ul>
<li>块级元素会独占一行</li>
<li>高度，行高，外边距和内边距可以单独设置</li>
<li>宽度默认是容器的100%</li>
<li>可以容纳内联元素和其他块级元素</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">常见的块级元素：&lt;h1&gt;~&lt;h6&gt;,&lt;p&gt;,&lt;div&gt;,&lt;ul&gt;,&lt;ol&gt;,&lt;li&gt;</span><br></pre></td></tr></table></figure>

<h4 id="2、行内元素"><a href="#2、行内元素" class="headerlink" title="2、行内元素"></a>2、行内元素</h4><ul>
<li>和相邻的行内元素在一行上</li>
<li>高度和宽度无效，但是水平方向的padding和margin可以设置，垂直方向上无效</li>
<li>默认宽度为本身的宽度</li>
<li>行内元素只能容纳纯文本或者其他行内元素（a标签除外）</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">常见的行内元素有：&lt;a&gt;,&lt;strong&gt;,&lt;b&gt;,&lt;em&gt;,&lt;del&gt;,&lt;span&gt;等</span><br></pre></td></tr></table></figure>

<h4 id="3、行内块级元素"><a href="#3、行内块级元素" class="headerlink" title="3、行内块级元素"></a>3、行内块级元素</h4><ul>
<li>和相邻的行内块在一行，但是会有间隙</li>
<li>默认宽肃为本身的宽度</li>
<li>高度，行高，内边距外边距都可以设置</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">在行内元素中有几个特殊的标签，&lt;img&#x2F;&gt;,&lt;input&#x2F;&gt;,&lt;td&#x2F;&gt;,可以设置它们的宽高度以及对齐属性</span><br></pre></td></tr></table></figure>

<h4 id="4、显示模式的转换"><a href="#4、显示模式的转换" class="headerlink" title="4、显示模式的转换"></a>4、显示模式的转换</h4><p>快转行内：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display：inline;</span><br></pre></td></tr></table></figure>

<p>行内转块：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display: block;</span><br></pre></td></tr></table></figure>

<p>块，行内转行内块：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display: inline-block;</span><br></pre></td></tr></table></figure>


        </div>

        <blockquote class="post-copyright">
    
    <div class="content">
        
<span class="post-time">
    Last updated: <time datetime="2020-10-20T16:36:05.316Z" itemprop="dateUpdated">2020-10-21 00:36:05</time>
</span><br>


        
        纸上得来终觉浅，绝知此事要躬行。
        
    </div>
    
    <footer>
        <a href="https://chen123138.github.io">
            <img src="/img/avatar.jpg" alt="CHEN WEI">
            CHEN WEI
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            

            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://chen123138.github.io/2020/04/25/My-New-Post/&title=《My New Post》 — CHENWEI 的技术小镇&pic=https://chen123138.github.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://chen123138.github.io/2020/04/25/My-New-Post/&title=《My New Post》 — CHENWEI 的技术小镇&source=前端小白进阶之路" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://chen123138.github.io/2020/04/25/My-New-Post/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《My New Post》 — CHENWEI 的技术小镇&url=https://chen123138.github.io/2020/04/25/My-New-Post/&via=https://chen123138.github.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://chen123138.github.io/2020/04/25/My-New-Post/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2020/04/26/%E7%95%AA%E8%8C%84%E5%BD%B1%E9%99%A2/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">番茄影视——看！片！真！刺！激！</h4>
      </a>
    </div>
  

  
</nav>



    











    <!-- Valine Comments -->
    <div class="comments vcomment" id="comments"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="//unpkg.com/valine@latest/dist/Valine.min.js"></script>
    <!-- Valine Comments script -->
    <script>
        var GUEST_INFO = ['nick','mail','link'];
        var guest_info = 'nick,mail,link'.split(',').filter(function(item){
          return GUEST_INFO.indexOf(item) > -1
        });
        new Valine({
            el: '#comments',
            notify: 'false' == 'true',
            verify: 'false' == 'true',
            appId: "AuyqOa9L1rpF9DVbxi1jVcIT-gzGzoHsz",
            appKey: "nHCl6Qz9ShsC5tthCynii4NH",
            avatar: "mm",
            placeholder: "Just go go",
            guest_info: guest_info.length == 0 ? GUEST_INFO : guest_info,
            pageSize: "10"
        })
    </script>
    <!-- Valine Comments end -->










</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        谢谢您呐！
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/img/wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check"
                data-wechat="/img/wechat.jpg" data-alipay="/img/alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>This blog is licensed under a <a rel="license noopener" href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.</span>
        </p>
    </div>
    <div class="bottom">
        <p><span>CHEN WEI &copy; 2015 - 2020</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://chen123138.github.io/2020/04/25/My-New-Post/&title=《My New Post》 — CHENWEI 的技术小镇&pic=https://chen123138.github.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://chen123138.github.io/2020/04/25/My-New-Post/&title=《My New Post》 — CHENWEI 的技术小镇&source=前端小白进阶之路" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://chen123138.github.io/2020/04/25/My-New-Post/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《My New Post》 — CHENWEI 的技术小镇&url=https://chen123138.github.io/2020/04/25/My-New-Post/&via=https://chen123138.github.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://chen123138.github.io/2020/04/25/My-New-Post/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };


</script>

<script src="/js/main.min.js?v=1.7.2"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="/js/search.min.js?v=1.7.2" async></script>






<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
